<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css"   />
        <link rel="stylesheet" href="../../res/cm/lib/codemirror.css" />
        <link rel="stylesheet" href="../../res/cm/theme/material.css" />
        <link rel="stylesheet" href="../../res/cm/addon/hint/show-hint.css" />
        <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js" ></script>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="../../res/cm/lib/codemirror.js"></script>
        <script src="../../res/cm/addon/mode/xml/xml.js"></script>
        <script src="../../res/cm/addon/mode/javascript/javascript.js"></script>
        <script src="../../res/cm/addon/mode/htmlmixed/htmlmixed.js"></script>
        <script src="../../res/cm/addon/hint/show-hint.js"></script>
        <script src="../../res/cm/addon/hint/html-hint.js"></script>
        <script src="../../res/cm/addon/hint/javascript-hint.js"></script>
        <script src="../../res/cm/addon/edit/closetag.js"></script>
        <script src="../../res/cm/addon/edit/closebrackets.js"></script>
        <script src="../../res/cm/addon/edit/matchtags.js"></script>

        <script src="../../res/js/mz.common.js"></script>
        <style>
            .tools {position: fixed; top: 0px; right: 20px; z-index: 999;}
            .template_text {width: 100%; height: 100%;}
            .template_text textarea{display:block; width: 100%; height: 100%;  border-top-width: 0;  line-height:20px; overflow:auto; background-color: #3F3F3F; color: #eee; font-size:12px; font-family:Courier New;}
            .CodeMirror { overflow: hidden;  height: 100%; width: 100%; }
        </style>
    </head>
    <body>

        <div id="app">
            <div class="tools">
                <button class="layui-btn layui-btn-success" onclick="submit()">提交</button>
                <button class="layui-btn layui-btn-normal" onclick="history.back()">返回</button>
            </div>
            <div class="template_text">
                <textarea id="content"></textarea>
            </div>
        </div>


        <script>


            window.data = {content: ''};
            var vm = initVue();

            var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
                lineNumbers: true,
                autoCloseBrackets: false,
                // indentUnit: 4,         // 缩进单位为4
                styleActiveLine: true, // 当前行背景高亮
                matchBrackets: true,   // 括号匹配
                mode: {name: 'htmlmixed'},     // HMTL混合模式
                lineWrapping: true,    // 自动换行
                theme: 'material'      // 编辑器主题
            });

            var path = getQueryString('path');
            var op = getQueryString('op');

            if(op == 'edit'){
                layui.$.get(base_context + '/template/getFileContent', {filePath:path}, function (res) {
                    if(res.success){
                        editor.setValue( res.data );
                    }else{
                        layer.msg(res.message);
                    }
                });
            }else if(op == 'create'){
                layer.prompt({formType: 2, title: '请输入文件名', btn:['确认'], closeBtn:0}, function(value, index, elem){
                    if(value.trim() && value.indexOf(' ') == -1){
                        path = path + value;
                        document.title = value;
                        layer.close(index);
                    }else{
                        layer.msg('名称格式不正确!');
                    }
                });
            }


            function submit() {
                layui.$.post(base_context + '/template/updateTemplateFile', {filePath:path, content:editor.getValue()}, function (res) {
                    if(res.success){
                        layer.msg('提交成功', function () {
                            window.history.back();
                        })
                    }else{
                        layer.msg(res.message);
                    }
                });
            }

        </script>

    </body>
</html>
